import React, { useRef, useEffect, useMemo } from 'react';
import { connect } from 'dva';
import { Link, Route, Switch } from 'dva/router';
import { Radio, Card, Button, Tag } from 'antd';
import {
    ArrowUpOutlined,
    ArrowDownOutlined,
    DownloadOutlined,
} from '@ant-design/icons';
import ReactEcharts from 'echarts-for-react';
import html2canvas from 'html2canvas';
import style from '@/pages/IndexPage.css';

let data = [];
for ( let i = 0 ; i < 30 ; i++){
    data.push({ date:i+1, beforeValue:10 + Math.round(Math.random() * 10), afterValue:10 + Math.round(Math.random() * 10), ratio:20 + Math.round(Math.random()*10) });
}
function MultiBarChart({ title, statusMaps, theme }) {
    let textColor = 'rgba(0, 0, 0, 0.85)';
    let seriesData = [], categoryData = [], beforeData=[], afterData = [], ratioData = [];
    data.forEach(i=>{
        categoryData.push(i.date);
        beforeData.push(i.beforeValue);
        afterData.push(i.afterValue);
        ratioData.push(i.ratio);
    })
   
    seriesData.push({
        type:'bar',
        name:'指标越限',
        barWidth:14,
        stack:'alarm',
        itemStyle:{ color:'#f53f3f'},
        data:beforeData,
    });
    seriesData.push({
        type:'bar',
        name:'通讯告警',
        barWidth:14,
        stack:'alarm',
        itemStyle:{ color:'#00b42a'},
        data:afterData,
    });
    
  
    return (
        
            <ReactEcharts
                notMerge={true}
                style={{ height: '100%' }}
                option={{
                    title: {
                        text: title,
                        textStyle: {
                            fontSize: 14,
                        },
                        left: 20,
                        top: 10,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer:{
                            type:'line',
                            label:{
                                backgroundColor:'#fff'
                            }
                        }
                    },
                    legend:{
                        left:'center',
                        top:6,
                        data:seriesData.map(i=>i.name)
                    },
                    grid:{
                        top:60,
                        left:20,
                        right:40,
                        bottom:40,
                        containLabel: true,
                    },
                    xAxis: {
                        type:'category',
                        axisTick:{ show:false },
                        axisLine:{ show:false },
                        data:categoryData 
                    },
                     
                    yAxis:[
                        {
                            type: 'value',
                            name: '件',
                            splitArea: {
                                show: false,
                            },
                            axisLine: { show: false },
                            axisTick: { show: false },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#f0f0f0',
                                },
                            },
                            axisLabel: {
                                show: true,
                                color: 'rgba(0, 0, 0, 0.65)',
                            }
                        },
                       
                    ],
                    
                    series:seriesData
                }}
            />
    );
}

export default React.memo(MultiBarChart);
